<div class="box-container">
    <div class="right-panel">
        <div class="content-top-bar">
            <div class="search-box">
                <div>
                    所段选择：
                    <nz-cascader nzChangeOnSelect [(ngModel)]="gateIds" [nzLoadData]="loadGateData.bind(this)"
                        (ngModelChange)="onGateChanges($event)"> </nz-cascader>
                </div>
                <div style="margin-left: 10px">
                    年份：
                    <nz-year-picker [(ngModel)]="year" (ngModelChange)="queryInfo()"></nz-year-picker>
                </div>
            </div>
            <div class="table-btn-group">
                <button class="top-bar-btn" nz-button nzType="primary" (click)="startEdit()">修改</button>
            </div>
        </div>
        <div class="main-content">
            <div class="tab-main-content">
                <nz-table #priceTable class="main-table" [nzData]="tableData" nzBordered [nzLoading]="loading"
                    [nzTitle]="tableTitle" [nzWidthConfig]="tableWidthConfig" [nzFrontPagination]="false"
                    [nzScroll]="tableScroll" nzSize="middle">
                    <thead>
                        <tr>
                            <th rowspan="2">斗口名称</th>
                            <th colspan="2">夏秋灌</th>
                            <th colspan="2">冬灌</th>
                        </tr>
                        <tr>
                            <th>平价水价</th>
                            <th>超价水价</th>
                            <th>平价水价</th>
                            <th>超价水价</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let data of priceTable.data" class="editable-row">
                            <td>{{data.name}}</td>
                            <td>
                                <div class="editable-cell" *ngIf="!isEditable; else marInputTpl">
                                    <div class="editable-cell-value-wrap">
                                        {{ data.summerPrice }}
                                    </div>
                                </div>
                                <ng-template #marInputTpl>
                                    <nz-input-number [(ngModel)]="editCache[data.reportId].data.summerPrice">
                                    </nz-input-number>
                                </ng-template>
                            </td>
                            <td>
                                <div class="editable-cell" *ngIf="!isEditable; else aprInputTpl">
                                    <div class="editable-cell-value-wrap">
                                        {{ data.summerOverPrice }}
                                    </div>
                                </div>
                                <ng-template #aprInputTpl>
                                    <nz-input-number [(ngModel)]="editCache[data.reportId].data.summerOverPrice">
                                    </nz-input-number>
                                </ng-template>
                            </td>
                            <td>
                                <div class="editable-cell" *ngIf="!isEditable; else mayInputTpl">
                                    <div class="editable-cell-value-wrap">
                                        {{ data.winterPrice }}
                                    </div>
                                </div>
                                <ng-template #mayInputTpl>
                                    <nz-input-number [(ngModel)]="editCache[data.reportId].data.winterPrice">
                                    </nz-input-number>
                                </ng-template>
                            </td>
                            <td>
                                <div class="editable-cell" *ngIf="!isEditable; else junInputTpl">
                                    <div class="editable-cell-value-wrap">
                                        {{ data.winterOverPrice }}
                                    </div>
                                </div>
                                <ng-template #junInputTpl>
                                    <nz-input-number [(ngModel)]="editCache[data.reportId].data.winterOverPrice">
                                    </nz-input-number>
                                </ng-template>
                            </td>
                        </tr>
                    </tbody>
                </nz-table>
                <ng-template #tableTitle>
                    <div class="table-title">
                        <span class="title">水价设置</span>
                    </div>
                </ng-template>
                <div class="bottom-bar" *ngIf="isEditable">
                    <button class="bottom-bar-btn" nz-button nzType="default" nz-popconfirm nzPopconfirmTitle="确定重置?"
                        (nzOnConfirm)="reset()" (nzOnCancel)="resetCancel()">
                        重置
                    </button>
                    <button class="bottom-bar-btn" nz-button nzType="primary" (click)="savePrice()">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
